<template>
  <div>
    <CloudSlider :default-value="30" :reverse="reverse"></CloudSlider>
    <CloudSlider range :default-value="[20, 50]" :reverse="reverse"></CloudSlider>
    Reversed:
    <CloudSwitch size="small" :checked="reverse" @change="handleReverseChange"></CloudSwitch>
  </div>
</template>

<script>
  export default {
    title: '5.反向',
    subTitle: '设置 reverse 可以将滑动条置反。',
    data () {
      return {
        reverse: true,
      }
    },
    methods: {
      handleReverseChange (reverse) {
        this.reverse = reverse;
      },
    }
  }
</script>

<style lang="scss">
</style>